<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <label>用户名：<input name="username" type="text"></label>
    <label>密码：<input name="password" type="password"></label>
    <label>性别：
        <select>
            <option name="gender">男</option>
            <option name="gender">女</option>
        </select>
    </label>
    <label>爱好：
        <input name="hobby" type="checkbox">篮球
        <input name="hobby" type="checkbox">足球
    </label>
    <label>是否已婚：
        <input name="married" type="radio">已婚
        <input name="married" type="radio">未婚
    </label>
    <label>简介：
        <textarea name="resume"></textarea>
    </label> -->
    <script>
       
        var arr = [{
                label: "用户名",
                name: "username",
                type: "text"
            }, {
                label: "密码",
                name: "password",
                type: "password"
            }, {
                label: "性别",
                name: "gender",
                type: "select",
                options: ['男', '女', '不男', '不女', 'Gay', '妖王']
            }, {
                label: "爱好",
                name: "hobby",
                type: "checkbox",
                options: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']
            }, {
                label: '是否已婚',
                name: 'married',
                type: 'radio',
                options: ['已婚', '未婚']
            },
            {
                label: '简介',
                name: 'resume',
                type: 'textarea'
            }
        ];
        
         /*
            1、声明一个输出结构的函数 setHtml，返回html结构
            2、根据不同的type类型生成不同的标签
            3、封装生成不同标签结构的函数，返回对应的html内容
        */
        

        class Sethtml{
            constructor(data){
                this.data = data
            }

            //遍历下拉列表的options数组
            setOptions(options){
                return options.map(item =>{
                        return` <option name="gender">${item}</option>`
                    })
            }
            //遍历复选框和多选框的options
            setCheckAndRadioOptions(options,name,type){
                return options.map(item =>{
                        return` <input name="${name}" type="${type}">${item}`
                    })
            }

            setHtml(){
                let html = []
                //遍历数组，判断type类型
                this.data.forEach(item=>{
                    if(item.type === 'text' || item.type === 'password'){
                        html.push( `<label>${item.label}：<input name="${item.name}" type="${item.type}"></label><br>`)
                    }
                    if(item.type === 'select'){
                        html.push(`<label>${item.label}：
                            <select>
                                ${this.setOptions(item.options)}
                            </select>
                            </label><br>`)
                        
                    }
                    if(item.type === 'checkbox' || item.type === 'radio'){
                        html.push(`<label>${item.label}：
                            ${this.setCheckAndRadioOptions(item.options,item.name,item.type).join('')}
                        </label><br>`)
                        
                    }
                    if(item.type === 'textarea'){
                        html.push(`<label>${item.label}：
                        <textarea name="${item.name}"></textarea>
                        </label><br>`)
                    }
                    return html
                })
                const box = document.createElement('div')
                box.innerHTML = html.join('')
                document.body.appendChild(box)
            }
            
        }
        const h = new Sethtml(arr)
        h.setHtml()
    </script>
</body>

</html>